<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal webiste</title>
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="./css/fontawesome-free-5.13.1-web/css/all.min.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src="./js/Jquery-3.5.1/Jquery.main.js"></script>
  <script src="./js/script.js"></script>
</head>
<body>
  <!-- Navbar -->
  <nav class="navbar">
    <div class="inner-width">
      <a href="/" class="logo"></a>
      <button class="menu-toggler">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <div class="navbar-menu">
        <a href="#">首页</a>
        <a href="#about">简介</a>
        <a href="#services">服务</a>
        <a href="#">Education</a>
        <a href="http://www.wusl.xyz/admin">后台管理系统</a>
        <a href="#">Contact</a>
      </div>
    </div>
  </nav>

  <!-- Home -->
  <section id="home">
    <div class="inner-width">
      <div class="content">
        <h1>Hi I'm </h1>
        <div class="sm">
          <a href="#" class="fab fa-github"></a>
          <a href="#" class="fab fa-qq"></a>
          <a href="#" class="fab fa-weibo"></a>
          <a href="#" class="fab fa-weixin"></a>
          <a href="#" class="fab fa-youtube"></a>
          <a href="#" class="fab ">gitee</a>
        </div>
        <div class="buttons">
          <a href="#">登录</a>
          <a href="#">注册</a>
        </div>
      </div>
    </div>
  </section>

  <!-- Home -->
  <section id="about">
    <div class="inner-width">
      <h1 class="section-title">About</h1>
      <div class="about-content">
        <img src="images/pic.png" alt="" class="about-pic">
        <div class="about-text">
          <h2>Hi! I'm Darkcode</h2>
          <h3>
            <span>Developer</span>
            <span>Designer</span>
            <span>Youtuber</span>
          </h3>
          <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed fuga eaque, culpa cupiditate animi laborum natus! Similique odio sit facilis dolorum dicta velit provident sequi iusto, est pariatur quisquam corrupti animi necessitatibus aliquid deserunt reprehenderit voluptatibus? Exercitationem deserunt fugit dicta nesciunt velit quae tempora eius praesentium odio est, voluptatem vero incidunt omnis ad iure, soluta maiores nostrum inventore alias culpa. Nihil suscipit possimus est harum accusamus impedit libero deleniti repellat.
          </p>
        </div>
      </div>

      <div class="skills">
        <div class="skill">
          <div class="skill-info">
            <span>HTML</span>
            <span>90%</span>
          </div>
          <div class="skill-bar html"></div>
        </div>

        <div class="skill">
          <div class="skill-info">
            <span>CSS</span>
            <span>80%</span>
          </div>
          <div class="skill-bar css"></div>
        </div>

        <div class="skill">
          <div class="skill-info">
            <span>Javascript</span>
            <span>70%</span>
          </div>
          <div class="skill-bar js"></div>
        </div>

        <div class="skill">
          <div class="skill-info">
            <span>PHP</span>
            <span>60%</span>
          </div>
          <div class="skill-bar php"></div>
        </div>

        <div class="skill">
          <div class="skill-info">
            <span>MySQL</span>
            <span>90%</span>
          </div>
          <div class="skill-bar mysql"></div>
        </div>

        <div class="skill">
          <div class="skill-info">
            <span>C#</span>
            <span>80%</span>
          </div>
          <div class="skill-bar cs"></div>
        </div>
      </div>
    </div>
  </section>

  <!-- Services -->
  <section id="services" class="dark">
    <div class="inner-width">
      <h1 class="section-title">Services</h1>
      <div class="services">
        <div class="service">
          <i class="icon fas fa-paint-brush"></i>
          <h4>Design</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="service">
          <i class="icon fas fa-pager"></i>
          <h4>Build Websites</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="service">
          <i class="icon fas fa-database"></i>
          <h4>Manage Databases</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="service">
          <i class="icon fab fa-android"></i>
          <h4>Android Apps</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="service">
          <i class="icon fas fa-credit-card"></i>
          <h4>Ui Design</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>

        <div class="service">
          <i class="icon fas fa-keyboard"></i>
          <h4>Edit Texts</h4>
          <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</p>
        </div>
      </div>
    </div>
  </section>

</body>
</html>